<template>
  <div class="navMenu">
    <el-menu
      :default-active="menuIndex"
      class="el-menu-vertical"
      background-color="#222"
      text-color="#ccc"
      :collapse="isfold"
      :collapse-transition="true"
      :router="true"
      active-text-color="#E6A23C"
      :unique-opened="true"
    >
      <div class="navMenu-name">{{isfold?'ROMA':'罗马车商贷'}}</div>

      <fragment v-for="(item,index) in navigationList" :key="index" class="nav-item-box">
        <el-menu-item
          :index="item.index"
          @click="saveRouter({name:item.name,path:item.path})"
          v-if="item.child.length == 0"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
        <el-submenu :index="item.index" v-if="item.child.length > 0">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item
            :index="itm.path"
            @click="saveRouter({name:itm.name,path:itm.path})"
            v-for="(itm,idx) in item.child"
            :key="idx"
          >{{itm.name}}</el-menu-item>
        </el-submenu>
      </fragment>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "navMenu",
  data() {
    return {
      menuIndex: "/home",
      navigationList: [
        {
          name: "数据概览",
          index: "/home",
          path: "/home",
          icon: "el-icon-s-data",
          child: []
        },
        {
          name: "商户授信管理",
          index: "1",
          icon: "el-icon-s-check",
          child: [
            {
              path: "/merchant_register",
              name: "商户注册列表"
            },
            {
              path: "/merchant_loan",
              name: "商户贷款信息"
            },
            {
              path: "/",
              name: "商户授信列表"
            },
            {
              path: "/",
              name: "商户初审列表"
            },
            {
              path: "/",
              name: "资料变更列表"
            },
            {
              path: "/",
              name: "测额度列表"
            }
          ]
        },
        {
          name: "商户贷款管理",
          index: "2",
          icon: "el-icon-s-finance",
          child: [
            {
              path: "/test2",
              name: "商户贷款列表"
            },
            {
              path: "/",
              name: "商户还款列表"
            },
            {
              path: "/",
              name: "到期车辆预警"
            },
            {
              path: "/",
              name: "逾期商户列表"
            },
            {
              path: "/",
              name: "巡库管理"
            },
            {
              path: "/",
              name: "人脸识别记录"
            }
          ]
        },
        {
          name: "商户调额管理",
          index: "3",
          icon: "el-icon-s-finance",
          child: [
            {
              path: "/test2",
              name: "调额建议列表"
            },
            {
              path: "/",
              name: "调额历史记录"
            }
          ]
        },
        {
          name: "指标管理",
          index: "/look",
          path: "/look",
          icon: "el-icon-s-flag",
          child: [
            {
              path: "/test2",
              name: "运营指标管理"
            },
            {
              path: "/",
              name: "风控指标管理"
            },
            {
              path: "/",
              name: "渠道指标管理"
            }
          ]
        },
        {
          name: "朋友圈匹配管理",
          index: "/look",
          path: "/look",
          icon: "el-icon-share",
          child: []
        },
        {
          name: "分期贷款管理",
          index: "/look",
          path: "/look",
          icon: "el-icon-time",
          child: []
        },
        {
          name: "优惠券管理",
          index: "4",
          icon: "el-icon-money",
          child: [
            {
              path: "/test2",
              name: "优惠券场景管理"
            },
            {
              path: "/",
              name: "优惠券批次管理"
            },
            {
              path: "/",
              name: "优惠券领取列表"
            }
          ]
        },
        {
          name: "代理管理",
          index: "5",
          icon: "el-icon-s-custom",
          child: [
            {
              path: "/test2",
              name: "代理渠道列表"
            },
            {
              path: "/",
              name: "代理数据汇总"
            },
            {
              path: "/",
              name: "代理分润列表"
            }
          ]
        },
        {
          name: "城市调研管理",
          index: "6",
          icon: "el-icon-shopping-cart-2",
          child: [
            {
              path: "/test2",
              name: "城市调研列表"
            },
            {
              path: "/",
              name: "市场调研列表"
            },
            {
              path: "/",
              name: "市场地图管理"
            }
          ]
        },
        {
          name: "商户支付管",
          index: "7",
          icon: "el-icon-postcard",
          child: [
            {
              path: "/test2",
              name: "增值业务服务"
            },
            {
              path: "/",
              name: "支付流水列表"
            },
            {
              path: "/",
              name: "保证金管理"
            }
          ]
        },
        {
          name: "商户投诉管理",
          index: "/look",
          path: "/look",
          icon: "el-icon-notebook-1",
          child: []
        },
        {
          name: "官网信息管理",
          index: "/look",
          path: "/look",
          icon: "el-icon-monitor",
          child: []
        },
        {
          name: "系统设置",
          index: "8",
          icon: "el-icon-setting",
          child: [
            {
              path: "/test2",
              name: "资金配置"
            },
            {
              path: "/",
              name: "常量设置"
            },
            {
              path: "/",
              name: "网站管理"
            },
            {
              path: "/",
              name: "资源管理"
            },
            {
              path: "/",
              name: "角色管理"
            }
          ]
        }
      ]
    };
  },
  created() {
    this.menuIndex = this.$route.name;
  },
  watch: {
    $route: {
      handler(val, oldVal) {
        this.menuIndex = val.name;
      },
      // 深度观察监听
      deep: true
    }
  },
  props: ["isfold"], //isfold 菜单折叠状态
  methods: {
    saveRouter(data) {
      this.$emit("getRouterData", data);
    }
  }
};
</script>

<style scoped>

.el-submenu .el-menu-item {
  min-width: 0;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;

}

.el-menu-vertical {
  min-height: 100vh;
  background: #222;
}
.navMenu-name {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #5e6d82;
  background: #222;
  text-align: center;
  box-sizing: border-box;
}
</style>
